<template>
  <div class="forget-password">
    <x-header>找回密码</x-header>
    <box gap="75px 0 15px 0">
      <group label-width="70px" label-align="right" label-margin-right="10px">
        <x-input v-model="submitForm.username" title="用户名" placeholder="请输入用户名"></x-input>
        <x-input v-model="submitForm.phone" title="手机号" placeholder="请输入手机号"></x-input>
        <x-input v-model="submitForm.verificationCode" title="验证码" placeholder="请输入验证码" class="weui-vcode">
          <x-button @click.native="sendSmsCode" slot="right" type="primary" mini>发送验证码</x-button>
        </x-input>
        <x-input v-model="submitForm.newPassword" type="password" title="新密码" placeholder="请输入新密码"></x-input>
        <x-input v-model="submitForm.makeSureNewPassword" type="password" title="确认密码" placeholder="请输入确认密码"></x-input>
      </group>
      <box gap="30px 15px">
        <x-button @click.native="submit" type="primary" middle>确认</x-button>
      </box>
    </box>
  </div>
</template>

<script>
import {
  XHeader,
  Box,
  Group,
  XInput,
  XButton
} from 'vux'
import {
  sendSmsCode
} from '../../api/api.com'
import {
  findPassword
} from '../../api/api'
export default {
  name: 'forgetPassword',
  components: {
    XHeader,
    Box,
    Group,
    XInput,
    XButton
  },
  data () {
    return {
      submitForm: {
        username: '',
        phone: '',
        verificationCode: '',
        newPassword: '',
        makeSureNewPassword: ''
      }
    }
  },
  methods: {
    sendSmsCode () {
      let form = this.submitForm
      if (form.username.trim() === '') {
        this.$vux.toast.text('请输入用户名')
        return
      }
      if (form.phone.trim() === '') {
        this.$vux.toast.text('请输入手机号')
        return
      }
      sendSmsCode({
        username: form.username,
        phone: form.phone
      }).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text('发送成功')
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    submit () {
      let form = this.submitForm
      if (form.username.trim() === '') {
        this.$vux.toast.text('请输入用户名')
        return
      }
      if (form.phone.trim() === '') {
        this.$vux.toast.text('请输入手机号')
        return
      }
      if (form.verificationCode.trim() === '') {
        this.$vux.toast.text('请输入验证码')
        return
      }
      if (form.newPassword.trim() === '') {
        this.$vux.toast.text('请输入新密码')
        return
      }
      if (form.makeSureNewPassword.trim() === '') {
        this.$vux.toast.text('请输入确认密码')
        return
      }
      findPassword(form).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text('修改成功')
          this.$router.push({
            path: '/login'
          })
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
  .forget-password{

  }
</style>
